<template>
  <div class="changePwd">
    <el-dialog v-if="visible" v-model="visible" width="500px" :close-on-click-modal="false"
               :show-close="false" :close-on-press-escape="false">
      <div class="detailDialog">修改密码</div>
      <el-form ref="chgpasswdForm" :model="form" :label-width="100" status-icon :show-message="false">
        <el-form-item label="原密码" prop="oldPassword" required>
          <el-input class="simcrm-input" type="password" placeholder="请输入原密码" v-model="form.oldPassword"
                    autocomplete="off" show-password />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword"
                      :rules="{ required: true, validator: validateNewPassword, trigger: 'blur' }">
          <el-input class="simcrm-input" type="password" placeholder="长度应为8-15个字符,必须包含大写、小写字母和数字"
                    v-model="form.newPassword" autocomplete="off" show-password />
        </el-form-item>
        <el-form-item label="重复新密码" prop="replyPassword"
                      :rules="{ required: true, validator: validateReplyPassword, trigger: 'blur' }">
          <el-input class="simcrm-input" type="password" placeholder="再次输入新密码" v-model="form.replyPassword"
                    autocomplete="off" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="onCancelClick">取消</el-button>
        <el-button type="primary" @click="onSubmitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api'
import { userStore } from '@/store/user'
import md5 from 'js-md5'

const emit = defineEmits(['update:visible', 'successClick', 'cancelClick'])
const props = defineProps(['visible'])

const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const _userStore = userStore()

const form = reactive({
  oldPassword: '',
  newPassword: '',
  replyPassword: ''
})
const chgpasswdForm = ref(null)

const validateNewPassword = (rule, value, callback) => {
  if (!value) {
    callback(new Error())
  } else {
    // let reg = /^(?=.*[a-z].*)(?=.*[A-Z].*)(?=.*[0-9].*)[a-zA-Z0-9^%&*@#,;\=\?\!$]{6,15}$/
    const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,15}$/
    if (!reg.test(value)) {
      callback(new Error('长度应为8-15个字符,必须包含大、小写字母和数字'))
    } else if (value === form.oldPassword) {
      callback(new Error('新密码不能与原密码相同'))
    } else {
      callback()
    }
  }
}

const validateReplyPassword = (rule, value, callback) => {
  if (!value) {
    callback(new Error())
  } else {
    // let reg = /^(?=.*[a-z].*)(?=.*[A-Z].*)(?=.*[0-9].*)[a-zA-Z0-9^%&*@#,;\=\?\!$]{6,15}$/
    const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,15}$/
    if (!reg.test(value)) {
      callback(new Error('长度应为8-15个字符,必须包含大、小写字母和数字'))
    } else if (value !== form.newPassword) {
      callback(new Error('与新密码不一致'))
    } else {
      callback()
    }
  }
}

const save = async () => {
  const employeeId = localStorage.getItem('_antiFake_login_employeeId')
  let { err } = await api.post(`/ruikeli/antiFake/changePassword/${employeeId}?newPassword=${md5(form.newPassword)}&oldPassword=${md5(form.oldPassword)}`)
  if (err) {
    ElMessage.error(err)
  } else {
    emit('successClick')
    ElMessage.success('修改密码成功')
    reset()
  }
}

const onCancelClick = () => {
  reset()
  emit('cancelClick')
}

const onSubmitForm = () => {
  chgpasswdForm.value.validate((valid) => {
    if (valid) {
      save()
    }
  })
}

const reset = () => {
  chgpasswdForm.value.resetFields()
  chgpasswdForm.value.clearValidate()
  visible.value = false
}
</script>
<style scoped>
.detailDialog {
  font-size: 18px;
  color: #303133;
  font-weight: 600;
  margin-bottom: 20px;
}
</style>
